<template>
	<view>
		<view class="border_box" @longtap="del_callback">
			<view class="user_box">
				<image :src="time_line_data.avatar" @tap="go_user_detail()" mode="aspectFill" class="user_head"></image>
				<view class="user_name_box" @tap="go_user_detail()">
					<view class="user_name_text">
						{{time_line_data.nickname}}
						<view class="send_time">
							{{time_line_data.ctime}}
						</view>
					</view>
					<view class="attention_box" :class="{attention_on:time_line_data.is_guanzhu}"
						v-if="show_attention && !time_line_data.is_myself "
						@tap.stop="add_attention(time_line_data.is_guanzhu)">
						{{time_line_data.is_guanzhu?'已关注':'关注'}}
					</view>
					<view class="attention_box attention_on" v-if="show_attention && time_line_data.is_myself ">
						我
					</view>
				</view>
				<image src="/static/time_line/more.png" v-if="show_report_box" @tap="show_report" mode="widthFix"
					class="more"></image>
			</view>
			<view class="">

			</view>
			<view class="timeline_content">
				<view class="content_text" @tap="go_detail()">
					{{time_line_data.content}}
				</view>
				<view class="image_list" @tap="go_detail()">
					<image :src="img" v-for="img,id in time_line_data.images_url" @tap.stop="preview(img)"
						mode="aspectFill" class="image_item">
					</image>
				</view>
			</view>
			<view class="agree_box" v-if="!show_comment">
				<view class="agree_item " :class="{light:time_line_data.is_dianzan}" @tap="agree()">
					<image src="/static/time_line/icon_agree_on.png" v-if="time_line_data.is_dianzan" mode="widthFix"
						class="agree_icon"></image>
					<image src="/static/time_line/icon_agree.png" v-else mode="widthFix" class="agree_icon"></image>
					{{time_line_data.zan_count}}
				</view>
				<view class="center_line"></view>
				<view class="agree_item" :class="{light:time_line_data.is_comment}" @tap="go_detail()">
					<image src="/static/time_line/icon_comment_on.png" v-if="time_line_data.is_comment" mode="widthFix"
						class="agree_icon"></image>
					<image src="/static/time_line/icon_comment.png" v-else mode="widthFix" class="agree_icon">
					</image>
					{{time_line_data.comment_count}}
				</view>
			</view>
			<view class="comment_box" v-else>
				<view class="comment_title">
					全部评论({{time_line_data.comment_count}})
					<view class="filter_box">

						<view class="filter_item" :class="{filter_on:current_order == 2}" @tap="set_order(2)">
							最新
						</view>
						<view class="filter_item " :class="{filter_on:current_order == 1}" @tap="set_order(1)">
							默认
						</view>
					</view>
				</view>
				<view class="comment_list">
					<view class="comment_item" v-for="item,id in comment_list" :key="id">
						<view class="comment_content">
							<image :src="item.avatar" mode="aspectFill" class="comment_user"></image>
							<view class="com_content">
								<view class="comment_nick">
									{{item.nickname}}
								</view>
								<view class="comment_text">
									{{item.content}}
								</view>
								<view class="reply_time">
									{{item.ctime}}<text class="light " style="padding-left: 10rpx;"
										@tap="reply_cb(item.id,0,item.nickname)">回复</text>
								</view>
								<block v-if="item.is_lower_level">
									<view class="open_replys" v-if="!item.page" @tap="get_second_comment(item.id,id)">
										展开更多回复
									</view>
									<view class="comment_item" v-for="ite,ids in item.list" :key="ids">
										<view class="comment_content">
											<image :src="ite.avatar" mode="aspectFill" class="comment_user"></image>
											<view class="com_content">
												<view class="comment_nick">
													{{ite.nickname}}
													<text style="padding-left: 15rpx;" v-if="ite.reply_nickname">
														回复 {{ite.reply_nickname}}</text>
												</view>
												<view class="comment_text">
													{{ite.content}}
												</view>
												<view class="reply_time">
													{{ite.ctime}}<text class="light " style="padding-left: 10rpx;"
														@tap="reply_cb(item.id,ite.id,ite.nickname)">回复</text>
												</view>

											</view>
											<view class="agree_box2 " :class="{light:ite.is_dianzan}"
												@tap="agree_comments2(ite.id,id,ids)">

												<image src="/static/time_line/icon_agree.png" v-if="!ite.is_dianzan"
													mode="widthFix" class="agree_icon2">
												</image>
												<image src="/static/time_line/icon_agree_on.png" v-else mode="widthFix"
													class="agree_icon2">
												</image>
												{{ite.zan_count}}
											</view>
										</view>
									</view>
									<view class="open_replys" v-if="item.page &&item.hasNextPage">
										<text @tap="get_next_page(item.id,id)">展开更多回复</text> <text class="hide_reply"
											@tap.stop="hide(item.id,id)">收起回复</text>
									</view>
									<view class="open_replys" v-else-if="item.page>=1 && !item.hasNextPage">
										<text>没有更多了</text> <text class="hide_reply"
											@tap.stop="hide(item.id,id)">收起回复</text>
									</view>
								</block>
							</view>
							<view class="agree_box2" :class="{light:item.is_dianzan}" @tap="agree_comments(item.id,id)">
								<image src="/static/time_line/icon_agree.png" v-if="!item.is_dianzan" mode="widthFix"
									class="agree_icon2">
								</image>
								<image src="/static/time_line/icon_agree_on.png" v-else mode="widthFix"
									class="agree_icon2">
								</image>
								{{item.zan_count}}
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>

		<uni-popup ref="report" type="center">
			<view class="report_box">
				<view class="report_title">
					选择不喜欢的理由
					<view class="report_btn" @tap="go_report">
						举报
					</view>
				</view>
				<view class="type_list">
					<view class="type_item " :class="{type_on:current_report_type == item.id}"
						v-for="item,id in report_type_list" :key="id" @tap="choose_report_type(item.id)">
						{{item.name}}
					</view>

				</view>
				<textarea name="" v-model="report_content" placeholder="请输入举报理由" class="reason" id="" cols="30"
					rows="10"></textarea>
			</view>

		</uni-popup>
	</view>
</template>


<script>
	export default {
		name: "timeline",
		data() {
			return {
				//动态的数据
				time_line_data: this.time_line_data_,
				//动态评论列表
				comment_list: this.comment_list_,
				//二级评论分页limit
				limit: 5,
				//评论排序方式
				current_order: 1,

				//举报类型
				report_type_list: [],
				//选择举报类型id
				current_report_type: 0,
				//举报内容
				report_content: ''
			};
		},
		props: {
			/*是否展示评论列表*/
			show_comment: {
				type: Boolean,
				default: false
			},
			/*是否展示关注按钮*/
			show_attention: {
				type: Boolean,
				default: true
			},
			/*是否展示举报*/
			show_report_box: {
				type: Boolean,
				default: true
			},

			time_line_data_: {
				type: Object,
				default () {
					return {}
				}
			},
			comment_list_: {
				type: Array,
				default () {
					return []
				}
			},

			/*是否点击头像昵称跳转*/
			is_navto: {
				type: Boolean,
				default: true
			}
		},
		watch: {
			time_line_data_: function(newer, old) {
				this.time_line_data = newer
			},
			comment_list_: function(newer, old) {
				this.comment_list = newer
			},

		},
		mounted: function() {

			this.report_type_list = this.$store.state.report_type_list
		},

		methods: {
			/*回复成功后增加回复数据*/
			reply_add_data: function(data) {
				if (data.parent_id) {
					for (var i = 0; i < this.comment_list.length; i++) {
						if (this.comment_list[i].id == data.parent_id) {
							if (!this.comment_list[i].list) {
								this.comment_list[i].list = [];
								this.comment_list[i].page = 0;
								this.comment_list[i].hasNextPage = true;
								this.comment_list[i].is_lower_level = true
							}
							this.comment_list[i].list[this.comment_list[i].list.length] = data;
							break
						}
					}
				} else {
					this.comment_list[this.comment_list.length] = (data)
				}
				this.$forceUpdate()
			},

			reply_cb: function(parent_id, comment_id, name) {
				let data = {
					parent_id: parent_id,
					comment_id: comment_id,
					reply_name: name
				}
				console.log(data)
				this.$emit('reply_cb', data)
			},
			go_user_detail: function() {
				if (!this.is_navto) return
				uni.navigateTo({
					url: '/pages/timeline/user_timeline?id=' + this.time_line_data.user_id
				})
			},

			add_attention: function(is_guanzhu) {
				let focus = () => {
					let data = {
						user_id: this.time_line_data.user_id
					}
					this.$api.addFocus(data, res => {
						if (res.status) {
							this.time_line_data.is_guanzhu = res.data
						} else {
							this.$common.errorToShow(res.msg)
						}
					})
				}
				console.log(is_guanzhu)
				if (is_guanzhu) {
					uni.showModal({
						content: '确定取消关注吗?',
						success: (res) => {
							if (res.confirm) {
								focus()
							}
						}
					});
				} else {
					focus()
				}
			},

			go_report: function() {
				let data = {
					community_id: this.time_line_data.id,
					type_id: this.current_report_type,
					reason: this.report_content
				}
				uni.showModal({
					content: '确定举报该动态吗？',
					success: (res) => {
						if (res.confirm) {
							this.$api.addReport(data, res => {
								if (res.status) {
									this.$common.successToShow(res.msg)
									this.$refs.report.close()
								} else {
									this.$common.errorToShow(res.msg)
								}
							})

						}
					}
				});
			},

			choose_report_type: function(id) {
				this.current_report_type = id
			},
			agree_comments: function(id, index) {
				let data = {
					comment_id: id
				}
				console.log(id, index)
				this.$api.agreeComments(data, res => {
					if (res.status) {
						this.comment_list[index].is_dianzan = res.data

						if (res.data)
							this.comment_list[index].zan_count++
						else {
							this.comment_list[index].zan_count--;
						}
						this.$forceUpdate()

					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			agree_comments2: function(id, index, index2) {
				let data = {
					comment_id: id
				}
				console.log(id, index, index2)

				this.$api.agreeComments(data, res => {
					if (res.status) {
						this.comment_list[index].list[index2].is_dianzan = res.data

						if (res.data)
							this.comment_list[index].list[index2].zan_count++
						else {
							this.comment_list[index].list[index2].zan_count--;
						}
						console.log(this.comment_list[index].list[index2].is_dianzan)
						this.$forceUpdate()
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},

			set_order: function(id) {
				this.current_order = id;
				this.$emit("set_order", this.current_order)
			},

			show_report: function() {
				this.$refs.report.open()
			},
			preview: function(img) {
				uni.previewImage({
					current: img,
					urls: this.time_line_data.images_url,
					loop: true
				})
			},
			agree: function() {
				let data = {
					community_id: this.time_line_data.id
				}
				this.$api.agree(data, res => {
					if (res.status) {
						// this.$common.successToShow(res.msg)
						this.time_line_data.is_dianzan = res.data;
						if (res.data)
							this.time_line_data.zan_count++
						else {
							this.time_line_data.zan_count--;
						}
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			del_callback: function() {
				this.$emit('longPressDelete', this.time_line_data.id)
			},

			go_detail: function() {


				this.$emit('go_detail', this.time_line_data.id)
			},
			//获取二级评论
			get_second_comment: function(id, index) {
				this.comment_list[index].page = 1;
				this.comment_list[index].list = []

				let data = {
					page: this.comment_list[index].page,
					limit: this.limit,
					community_id: this.time_line_data.id,
					parent_id: id,
					order: this.current_order,
				}
				this.$api.getCommentsList(data, res => {
					if (res.status) {
						this.comment_list[index].list = res.data;
						this.comment_list[index].hasNextPage = res.data.length >= this.limit
						this.$forceUpdate()
					}
				})
			},
			get_next_page: function(id, index) {
				let new_page = this.comment_list[index].page + 1;
				let data = {
					page: new_page,
					limit: this.limit,
					community_id: this.time_line_data.id,
					parent_id: id,
					order: this.current_order,
				}
				this.$api.getCommentsList(data, res => {
					if (res.status) {
						this.comment_list[index].list = this.comment_list[index].list.concat(res.data);
						this.comment_list[index].hasNextPage = res.data.length >= this.limit;
						this.comment_list[index].page = new_page;
						this.$forceUpdate()
					}
				})
			},
			hide: function(id, index) {
				this.comment_list[index].page = undefined;
				this.comment_list[index].list = undefined;
				this.comment_list[index].hasNextPage = undefined;
				this.$forceUpdate()
			}
		}
	}
</script>


<style lang="scss">
	.comment_list {
		width: 100%;

		.comment_item {
			padding: 30rpx 0;
			width: 100%;
			border-bottom: 1rpx solid #707070;

			.comment_content {
				display: flex;

				position: relative;

				.agree_box2 {
					line-height: 35rpx;
					font-size: 22rpx;
					color: #A1A1A1;
					display: flex;
					align-items: center;
					flex-direction: column;
					position: absolute;
					top: 0rpx;

					right: 10rpx;

					.agree_icon2 {
						width: 27rpx;
						height: 27rpx;
						margin-top: 27rpx;
						display: block;
					}
				}

				.com_content {
					flex: 1;
					padding-left: 13rpx;

					.open_replys {
						padding-top: 20rpx;
						font-size: 22rpx;
						color: #FFE4B4;
					}

					.hide_reply {
						padding-left: 20rpx;
					}

					.comment_nick {
						line-height: 30rpx;
						font-size: 22rpx;
						font-weight: 400;
						color: #A1A1A1;
					}

					.comment_text {
						width: 80%;
						line-height: 40rpx;
						font-size: 28rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
						padding-top: 10rpx;
					}

					.reply_time {
						padding-top: 10rpx;
						font-size: 22rpx;
						color: #A1A1A1;
					}

				}
			}

			.comment_user {
				width: 71rpx;
				height: 71rpx;
				border-radius: 50%;
			}
		}
	}

	.comment_box {
		width: 100%;
		padding-top: 30rpx;

		.comment_title {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 30rpx;
			font-weight: bold;
			color: #FFFFFF;

			.filter_box {
				width: 176rpx;
				height: 43rpx;
				border-radius: 23rpx;

				background-color: #343434;
				display: flex;
				align-items: center;

				.filter_item {
					flex: 1;
					height: 43rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 22rpx;
					font-weight: 400;
					color: #FFFFFF;
					border-radius: 23rpx;
				}

				.filter_on {
					background-color: #575757;
				}
			}
		}
	}

	.report_box {
		width: 660rpx;
		background-color: #292B2B;
		padding: 30rpx 60rpx;
		border-radius: 20rpx;

		.reason {
			width: 100%;
			box-sizing: border-box;
			border: 1rpx solid #FFFFFF;
			padding: 20rpx;
			font-size: 24rpx;
			color: #fff;
			line-height: 33rpx;
			border-radius: 20rpx;
		}

		.type_list {
			width: 100%;
			padding-top: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;

			.type_item {
				width: 232rpx;
				height: 46rpx;
				border-radius: 32rpx;
				border: 1rpx solid #FFFFFF;
				font-size: 24rpx;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 30rpx;
			}

			.type_on {
				color: #292B2B;
				background: #FFE4B4;
				border: none;
			}
		}

		.report_title {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 24rpx;
			color: #FFFFFF;

			.report_btn {
				width: 144rpx;
				height: 44rpx;

				border-radius: 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				color: #292B2B;
				background: #FFE4B4;
			}
		}
	}
</style>
<style lang="scss">
	.agree_box {
		width: 100%;
		padding-top: 10rpx;
		display: flex;
		align-items: center;

		.agree_item {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			color: #999999;
			line-height: 45rpx;

			.agree_icon {
				width: 28rpx;
				height: 28rpx;
				margin-right: 5rpx;
			}
		}



		.center_line {
			width: 2rpx;
			height: 32rpx;
			opacity: 0.4;
			background: #999999;
		}
	}

	.timeline_content {
		width: 100%;
		padding-top: 22rpx;

		.content_text {
			width: 100%;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 45rpx;
		}

		.image_list {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
			padding-top: 30rpx;

			.image_item {
				width: 191rpx;
				height: 191rpx;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
			}
		}

		.image_list::after {
			content: '';
			width: 191rpx;
			height: 0;
		}

	}
</style>
<style lang="scss">
	.user_box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.more {
			width: 6rpx;
			height: 33rpx;
			margin-right: 20rpx;
		}

		.user_name_box {
			flex: 1;
			display: flex;
			align-items: center;
			line-height: 1;

			.user_name_text {
				max-width: 400rpx;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
				font-size: 32rpx;
				font-weight: bold;
				color: #FFE4B4;

				.send_time {
					font-size: 26rpx;
					color: #8A8A8A;
					padding-top: 10rpx;
					font-weight: normal;
				}
			}

			.attention_box {
				height: 40rpx;
				border-radius: 30rpx;
				border: 1rpx solid #FFE4B4;
				font-size: 22rpx;
				color: #FFE4B4;
				padding: 0 15rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 15rpx;
			}

			.attention_on {
				border: none;
				background-color: #FFE4B4;
				color: #292B2B;
			}
		}

		.user_head {
			width: 71rpx;
			height: 71rpx;
			border-radius: 50%;
			margin-right: 15rpx;
		}
	}

	.border_box {
		width: 100%;
		background: #292B2B;
		box-shadow: 0px 5rpx 30rpx 1rpx rgba(0, 0, 0, 0.05);
		border-radius: 20rpx;
		padding: 30rpx 20rpx;
		margin-bottom: 30rpx;
		position: relative;
	}
</style>
<style>
	.light {
		color: #FFE4B4 !important
	}
</style>
